<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
</head>
<body>
<script src="jquery-1.10.1.min.js"></script>
<script src="jquery.uploadify.js"></script>
<link href="uploadify.css" rel="stylesheet" type="text/css"/>
<input id="file_upload" name="file" type="file" multiple="true">
<!--uploadify('upload','*') upload是执行上传操作，fileId是*表示上传所有文件，-->
<input type="button" value="上传" onclick="javascript:$('#file_upload').uploadify('upload','*')"/>
<div><img id="imgBox" src="" style="width: auto; height: auto; max-width: 300px; max-height: 300px; }" /></div>
<script type="text/javascript">
    $(function () {
        $("#file_upload").uploadify({
            auto: false,
            fileTypeDesc: 'Image Files',
            fileTypeExts: '*.jpg; *.png;*.gif;*.*',
            fileObjName: 'file',//controller中接受的参数名
            height: 30,
            buttonText: '请选择图片...',
            swf: 'uploadify.swf',
            uploader: 'http://localhost:8080/upload.html',
            width: 120,
            fileSizeLimit: '4MB',
            formData:{"key1":"abc","key2":123},//额外数据
            onUploadSuccess: function (file, data, response) {
                $("#imgBox").attr("src", data);
            },
            onUploadError: function (file, errorCode, errorMsg, errorString) {
                alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
            }
        });
    });
</script>
</body>
</html>